<template>
   <div>
      <h2>车位统计</h2>
      <div id="chartfour" class="four">

      </div>
   </div>
</template>

<script setup>
import { inject, onMounted, reactive } from "vue";
import Link from "../api/Link.js";
import apiurl from "../api/url.js";
let $echarts = inject("echarts")


onMounted(() => {
   let myChart = $echarts.init(document.getElementById("chartfour"))

   Link(apiurl.chartDataFour).then((ok) => {
      console.log(ok);

      myChart.setOption({
         xAxis: {
            type: "category",
            data: ok.data.day,
            axisLine: {
               lineStyle: {
                  color: "#000000"
               }
            }
         },
         yAxis: {
            type: "value",
            axisLine: {
               lineStyle: {
                  color: "#000000"
               }
            }
         },
         grid: {
            top: "5%",
            left: "1%",
            botton: "2%",
            right: "6%",
            containLabel: true
         },
         tooltip: {
            trigger: "axis",
            axisPointer: {
               type: "shadow"
            }
         },
         labelLine: {
            show: true
         },
         series: [
            {
               type: "bar",
               name:"一般用户",
               data: ok.data.num.一般用户,
               stack: "total"
            },
            {
               type: "bar",
               name:"月租用户",
               data: ok.data.num.月租用户,
               stack: "total"
            },
            {
               type: "bar",
               name:"特殊车辆",
               data: ok.data.num.特殊车辆,
               stack: "total"
            }
         ]
      })

   })
})
</script>

<style lang='scss' scoped>
h2 {
   height: 0.4rem;
   color: #000000;
   line-height: 0.2rem;
   text-align: center;
   font-size: 0.4rem;
}

.four {
   height: 4.5rem;
}
</style>